<!--
 * @Author: fangshengchu
 * @Date: 2024-05-17 11:38:40
 * @LastEditTime: 2024-06-11 15:31:24
 * @LastEditors: fangshengchu
 * @Description: 
 * @FilePath: \szhk-fe\src\views\purchaseArrival\threeCodeManagement\DetailModal.vue
-->
<template>
  <contentModel
    v-if="modelValue"
    title="详情"
    :has-footer="false"
    @open="openModal"
    @close="cancel"
  >
    <standard-table
      ref="detailTable"
      v-model:selectedKeys="nowSelectedKeys"
      :component-config="tableComponentConfig"
      :render-config="tableRenderConfig"
      :render-keys="tableRenderKeys"
      :loading="loading"
      :data="tableData"
      :total="tableTotal"
      :row-selection-type="rowSelectionType"
      :columns="columns"
      @init-columns-end="initColumns"
      @selection-change="selectionChange"
      @page-change="pageChange"
      @page-size-change="pageSizeChange"
    >
    </standard-table>
  </contentModel>
</template>

<script lang="ts" setup>
  import { defineAsyncComponent, ref } from 'vue';
  import standardTable from '@/common/components/standard-table/index.vue';
  import lodash from 'lodash';
  import { getPmsDcdPage } from '@/api/purchaseArrival/threeCodeVerification';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../moduleCommon/tableComp/baseTableConfig';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    selectId: {},
  });
  const emits = defineEmits(['update:modelValue']);
  const cancel = () => {
    emits('update:modelValue', false);
  };

  const tableRenderKeys = [
    'secretLevel',
    'orderNo2',
    'sysOrderNo',
    'mdsVendorName',
    'drawingCode1',
    'mdsItemName1',
    'marque1',
    'techCondition',
    'statusIdentificationNo',
    'mdsCategoryLv1Name1',
    'invDeliverQty',
    'invMdsUnitDesc',
    'pmsDeliverQty',
    'invoiceNo',
    'mdsCustomerTypeName',
    'itemManufactureFactory',
    'dealerName',
    'editUserName',
    'editDate',
    'pmsReceiveDate',
    'checkTimeType',
    'mdsUnitRate',
  ];
  const detailTable = ref(null);
  const columns = ref<object[]>([]);
  const allColumns = ref<object[]>([]);
  const tableTotal = ref<number>(0);
  const loading = ref<boolean>(false);
  const initColumns = (data: any[]) => {
    columns.value = lodash.cloneDeep(data);
    allColumns.value = lodash.cloneDeep(data);
  };

  const rowSelectionType = {
    type: 'checkbox',
  };

  const tableData = ref([]);
  const getTableData = async (query) => {
    const page = detailTable.value.getStatus();
    loading.value = true;
    const { data } = await getPmsDcdPage({
      ...query,
      ...page,
      id: props.selectId,
    });
    tableData.value = data.list;
    tableTotal.value = data.total;
    loading.value = false;
  };
  const pageChange = () => {
    getTableData();
  };
  const pageSizeChange = () => {
    getTableData();
  };
  const openModal = () => {
    if (loading.value) return;
    if (props.selectId) {
      loading.value = true;
      getTableData();
    } else {
      loading.value = false;
    }
  };
</script>
